<template>
    <div id="ToolContainerSelect">
        <el-dialog title="工具分类器" v-model="drawerVisible" style="width:65%;height: 65%;" :direction="direction" 
        :before-close="handleClose"
        @open="onOpenDrawner">
            <ToolContanerTree ref="refToolContanerTree" />


            <template #footer>
                <span class="dialog-footer" >
                <el-button class="button" type="primary" @click="drawerVisible = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script setup>
import ToolContanerTree from './ToolContanerTree.vue';
import { ref,onMounted } from 'vue'
import axios from 'axios';

const preCheckedNodeArr = ref([])
const refToolContanerTree = ref(null)
const parentModule = ref(null)
const drawerVisible = ref(false)
const direction = ref("ttb");


const handleClose = (done) => {
    done();
}


const onOpenDrawner = () => {
    console.log("ToolContainerSelect open----------------");
    // refToolContanerTree.value.preCheckedNodeArr = preCheckedNodeArr;
    refToolContanerTree.value.setPreCheckedNodeArr(preCheckedNodeArr.value);
    refToolContanerTree.value.initAllCategory();
}

onMounted(()=>{
  console.log("ToolContainerSelect onmouted----------------");
})

const setPreCheckedNodeArr = (arr) => {
    preCheckedNodeArr.value = arr;
    
}

var notifySelNode = function(){
    console.log("tool container notifySelNode*****");
    parentModule.value.notifySelNode();
}

defineExpose({
    drawerVisible,
    parentModule,
    notifySelNode,
    refToolContanerTree,
    setPreCheckedNodeArr
});
</script>
  
<style scoped>
.button{
  position: relative;
  height: 33px;
  width: 100px;
  background: rgba(35, 19, 252, 0.425);
  border-radius: 10px;
  margin-top: 208px;
  box-shadow: none;
  color: white;
  margin-left: 40px;
  margin-right: 10px;
}
</style>
  